﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>MyCalendar</title>
<link rel="stylesheet" type="text/css" href="../container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="../../base.css" />
<script type="text/javascript" src="../yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../event/event.js"></script>
<script type="text/javascript" src="../element/element.js"></script>
<script type="text/javascript" src="../container/container.js"></script>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript" src="../common.js"></script>
<style type="text/css">
#cal {
    border:none;
    padding:1em;
}
#container .bd form {
    clear:left;
}
/* Have calendar squeeze upto bd bounding box */
#container .bd {
    padding:0;
}
#cal1 {
    border:none;
    padding:1em;
}
#container1 .bd form {
    clear:left;
}
/* Have calendar squeeze upto bd bounding box */
#container1 .bd {
    padding:0;
}
.yui-skin-sam .yui-calendar .abcleft{
background:url("leftandright.png") no-repeat 0 0;
bottom:0;
cursor:pointer;
height:15px;
left:-10px;
margin-left:0.4em;
top:0;
width:18px;
}
.yui-calendar .abcleft{
overflow:hidden;
position:absolute;
text-indent:-10000em;
z-index:1;
}

.yui-skin-sam .yui-calendar .abcright{
background:url("leftandright.png") no-repeat -20px 0;
bottom:0;
cursor:pointer;
height:15px;
margin-right:0.4em;
right:-10px;
top:0;
width:19px;}
.yui-calendar .abcright {
overflow:hidden;
position:absolute;
text-indent:-10000em;
z-index:1;
}
.selector{color:black}
.calweekdayrow .restday{color:#2C8CE3;
font-weight:bold;
text-align:center;
width:2em;}
</style>

</head>
<body class="yui-skin-sam">
<div>
<br />
<br />
<br />
<br />
<br />
<input type="text" id="inputCalendar1" />
<input type="text" id="inputCalendar2" />
<br />
<select><option>asasd</option></select>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<style>
.ssharing_calendar{position:absolute;float:left;background-color:#fff;border:1px solid #7B9EBD;font:12px sans-serif}
.ssharing_calendar iframe{opacity:0;filter:alpha(opacity=0);width:100%;height:100%;border:0;margin:0;padding:0;position:absolute;z-index:0;top:0;left:0;}
.ssharing_calendar .c_columns{padding:5px;z-index:1;width:145px;float:left;} 
.ssharing_calendar .c_columns .c_title{text-align:center;position:relative;width:100%;float:left;margin-bottom:5px;}
.ssharing_calendar .c_columns .c_title a{display:block;position:absolute;width:0;height:12px;padding-left:9px;overflow:hidden;top:2px;}
.ssharing_calendar .c_columns .c_title a.prev{background:url("../../JS/calendar/assets/callt.gif") no-repeat;left:0}
.ssharing_calendar .c_columns .c_title a.next{background:url("../../JS/calendar/assets/calrt.gif") no-repeat;right:0;}
.ssharing_calendar .c_columns .c_title label{font-size:14px;font-weight:bold;}
.ssharing_calendar .c_columns dl{margin:0;}
.ssharing_calendar .c_columns dl dt{float:left;background-color:#F2F2F2;top:0;margin:0;padding:1px 0;cursor:default;font-weight:normal;text-align:center;width:20px;height:17px;line-height:17px;overflow:hidden;}
.ssharing_calendar .c_columns dl dd{clear:both;margin:0;}
.ssharing_calendar .c_columns dl dd a{float:left;display:block;width:20px;height:17px;line-height:17px;overflow:hidden;text-align:center;cursor:pointer;color:#000;text-decoration:none;}
.ssharing_calendar .c_columns dl dd a:hover{text-decoration:underline;background-color:#0000FF;color:#fff}
.ssharing_calendar .c_columns dl dd a.overday,.ssharing_calendar .c_columns dl dd a.blankday{cursor:default;text-decoration:none;background-color:#fff;color:#ccc}
.ssharing_calendar .c_columns dl dd a.today{font-weight:bold;}
.ssharing_calendar .c_columns dl dd a.selectable{background-color:#FFF19F;color:#F26E04;}
</style>
<div class="ssharing_calendar">
<!--<iframe src="javascript:false;"></iframe>-->
<div class="c_columns">
    <div class="c_title">
        <a href="#" class="prev">上个月</a>
        <label>2011年一月</label>
    </div>
    <dl>
        <dt>日</dt>
        <dt>一</dt>
        <dt>二</dt>
        <dt>三</dt>
        <dt>四</dt>
        <dt>五</dt>
        <dt>六</dt>
        <dd>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">6</a>
            <a href="#">7</a>
            <a href="#">8</a>
            <a href="#">9</a>
            <a href="#">10</a>
            <a href="#">11</a>
            <a href="#">12</a>
            <a href="#">13</a>
            <a href="#" class="selectable">14</a>
            <a href="#">15</a>
            <a href="#">16</a>
            <a href="#">17</a>
            <a href="#" class="today">18</a>
            <a href="#">19</a>
            <a href="#">20</a>
            <a href="#">21</a>
            <a href="#">22</a>
            <a href="#">23</a>
            <a href="#">24</a>
            <a href="#">25</a>
            <a href="#">26</a>
            <a href="#">27</a>
            <a href="#">28</a>
            <a href="#">29</a>
            <a href="#">30</a>
            <a href="#">31</a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </dd>
    </dl>
</div>
<div class="c_columns">
    <div class="c_title">
        <a href="#" class="next">下个月</a>
        <label>2011年二月</label>
    </div>
    <dl>
        <dt>日</dt>
        <dt>一</dt>
        <dt>二</dt>
        <dt>三</dt>
        <dt>四</dt>
        <dt>五</dt>
        <dt>六</dt>
        <dd>
            <a href="#" class="blankday"></a>
            <a href="#" class="blankday"></a>
            <a href="#" class="overday">1</a>
            <a href="#" class="overday">2</a>
            <a href="#" class="overday">3</a>
            <a href="#" class="overday">4</a>
            <a href="#" class="overday">5</a>
            <a href="#" class="overday">6</a>
            <a href="#" class="overday">7</a>
            <a href="#" class="overday">8</a>
            <a href="#" class="overday">9</a>
            <a href="#" class="overday">10</a>
            <a href="#" class="overday">11</a>
            <a href="#" class="overday">12</a>
            <a href="#" class="overday">13</a>
            <a href="#" class="overday">14</a>
            <a href="#" class="overday">15</a>
            <a href="#" class="overday">16</a>
            <a href="#" class="overday">17</a>
            <a href="#" class="today">18</a>
            <a href="#">19</a>
            <a href="#">20</a>
            <a href="#">21</a>
            <a href="#">22</a>
            <a href="#" class="selectable">23</a>
            <a href="#">24</a>
            <a href="#">25</a>
            <a href="#">26</a>
            <a href="#">27</a>
            <a href="#">28</a>
            <a href="#" class="blankday"></a>
            <a href="#" class="blankday"></a>
            <a href="#" class="blankday"></a>
            <a href="#" class="blankday"></a>
            <a href="#" class="blankday"></a>
            <a href="#" class="blankday"></a>
            <a href="#" class="blankday"></a>
            <a href="#" class="blankday"></a>
            <a href="#" class="blankday"></a>
            <a href="#" class="blankday"></a>
            <a href="#" class="blankday"></a>
            <a href="#" class="blankday"></a>
        </dd>
    </dl>
</div>
</div>
<script type="text/javascript">

    YAHOO.util.Event.onDOMReady(function () {
        new OverrideCalendar("inputCalendar1");
        new OverrideCalendar("inputCalendar2");
    });
    function aaa(date) {
        var start = new Date(date.getFullYear(), date.getMonth(), 1);
        var end = new Date(start.getFullYear(), start.getMonth() + 1, 1);
        var d = new Date(end.getTime());
        d.setDate(d.getDate() - 1);
        var preDays = start.getDay();
        var monthDays = d.getDate();
        var nextDays = 42 - preDays - monthDays;

        var hideBlankWeeks = true;
        if (hideBlankWeeks && nextDays >= 7) {
            var blankWeeks = Math.floor(nextDays / 7);
            for (var p = 0; p < blankWeeks; ++p) {
                nextDays -= 7;
            }
        }
        alert(preDays + "-" + monthDays + "-" + nextDays);
    }
    aaa(new Date());
//    var k = new Date();
//    k.setMonth(k.getMonth() + 1);
//    aaa(k);
//    k.setMonth(k.getMonth() + 1);
    //aaa(k);
</script>

<!--
<div class="calyearwrap">
    <a class="fl" href="javascript:;">确定</a>
    <a class="fr" href="javascript:;">取消</a>
    <div class="calyearcontainer">
        <ul class="calyearselectul">
            <li>2010年</li>
            <li class="calyearselected">2011年</li>
            <li class="calyearhover">2012年</li>
            <li>2013年</li>
            <li>2014年</li>
            <li>2015年</li>
            <li class="last">2016年</li>
        </ul>
    </div>
</div>
-->
</body>
</html>
